<template>
    <div class="subjectList">
        <!--条件-->
        <Card class="header">

            <!--会员类型-->
            <Select v-model="vipType"
                    style="width:100px"
                    placeholder="会员类型"
                    @on-change="changeVip"

                    clearable>
                <Option v-for="(obj,i) in vipList"
                        :value="obj.value"
                        :key="obj.value">
                    {{ obj.label }}
                </Option>
            </Select>

            <!--老师课程-->
            <Select v-if="teacherFlag" v-model="teacherType"
                    style="width:150px;margin-left: 30px"
                    placeholder="老师姓名"
                    clearable>
                <Option v-for="(obj,i) in teacherList"
                        :value="obj.value"
                        :key="obj.value">
                    {{ obj.label }}
                </Option>
            </Select>

            <!--课程类型-->
            <Select v-if="teacherFlag" v-model="cozType"
                    style="width:200px;margin-left: 30px"
                    placeholder="课程类型"
                    clearable>
                <Option v-for="(obj,i) in cozList"
                        :value="obj.value"
                        :key="obj.value">
                    {{ obj.label }}
                </Option>
            </Select>

            <!--图片展示 ? 列表展示-->
            <Icon v-if="showTypeFlag" type="ios-apps-outline" size="40" style="float: right" @click="changeShowType"/>
            <Icon v-if="!showTypeFlag" type="ios-list-box-outline" size="40" style="float: right"
                  @click="changeShowType"/>

        </Card>

        <!--列表-->
        <Card class="body"
              dis-hover>

            <!--图片展示-->
            <div v-if="showTypeFlag" class="box">

                <div class="avg"
                     v-for="(obj,i) in subjectList"
                     :key="obj.subjectId"
                     @click="goDetails(obj)">
                    <!-- @click="gotoDetails(obj)">-->

                    <!--课程图片-->
                    <div class="img-box">
                        <img :src="obj.subPic">
                    </div>

                    <!--课程名称-->
                    <div class="name">
                        {{obj.subName}}
                    </div>

                    <!--课程简介-->
                    <div class="introduction">
                        {{obj.subIntroduction}}
                    </div>

                    <div class="other-box">
                        <div class="vip">
                            <span v-if="obj.vip==1" class="yes">会员</span>
                            <span v-if="obj.vip==0" class="no">免费</span>
                        </div>
                        <div class="view">

                        </div>
                        <div class="score">
                            <el-rate disabled
                                     allow-half
                                     v-model="obj.subScore"
                                     :low-threshold=1.5
                                     :high-threshold=3
                                     style="width:120px"
                                     :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                            </el-rate>
                        </div>
                    </div>
                </div>

            </div>

            <!--列表展示-->
            <div v-if="!showTypeFlag" class="list">

                <Table :columns="subjectListData"
                       :data="subjectList"
                       show-header
                       draggable
                       border
                       @on-drag-drop="dragOrder"
                       size="small">

                    <!--课程标题-->
                    <template slot-scope="{ row, index }" slot="title">
                        <span class="name" @click="goDetails(row,index)">{{row.subName}}</span>
                    </template>

                    <!--课程封面-->
                    <template slot-scope="{ row, index }" slot="subPic">
                        <img :src="row.subPic" style="width: 150px;height: 60px">
                    </template>

                    <!--课时总数-->
                    <template slot-scope="{ row, index }" slot="subTotal">
                        <span class="score">{{row.subTotal}}</span>
                    </template>

                    <!--课时评分-->
                    <template slot-scope="{ row, index }" slot="subScore">
                        <span class="score">{{row.subScore}}</span>
                    </template>

                    <!--课时vip-->
                    <template slot-scope="{ row, index }" slot="vip">
                        <img src="../../assets/course/vip.svg"
                             class="vip"
                             v-if="row.vip!=0">
                    </template>

                    <!--状态-->
                    <template slot-scope="{ row, index }" slot="status">
                        <!-- true-color="#13ce66" false-color="#ff4949" -->
                        <i-switch v-model="row.status"
                                  :true-value="1"
                                  :false-value="0"
                                  false-color="#ff4949"
                                  @on-change="changeStatus(row)">
                            <span slot="open"></span>
                            <span slot="close" style="font-size: 14px"></span>
                        </i-switch>
                    </template>

                    <!--详情-->
                    <template slot-scope="{ row, index }" slot="details">
                        <Button size="small" type="success" @click="goDetails(row, index)">详情</Button>
                    </template>

                    <!--编辑-->
                    <template slot-scope="{ row, index }" slot="edit">
                        <Button size="small" type="info" @click="edit(row, index)">编辑</Button>
                    </template>

                    <!--排序-->
                    <template slot-scope="{ row, index }" slot="order">
                        <Button size="small" type="warning" @click="order(row, index)">排序</Button>
                    </template>

                    <!--删除-->
                    <template slot-scope="{ row, index }" slot="del">
                        <Button size="small" type="error" @click="del(row, index)">删除</Button>
                    </template>
                </Table>

            </div>
        </Card>


        <!--课程更新信息-->
        <Modal v-model="updateSubFlag"
               draggable
               width="1000"
               @on-ok="okUpdateSub">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">课程更新</span>
            </p>

            <Form :model="subjectInfo" :label-width="100">
                <!--课程封面-->
                <FormItem label="课程封面" style="margin-top: 10px">
                    <Tooltip content="课程封面URL" placement="right" theme="light">
                        <Input prefix="ios-card-outline"
                               v-model="subjectInfo.subPic"
                               placeholder="课程封面"
                               style="width: 800px"
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程社区-->
                <FormItem label="课程社区" style="margin-top: 20px">
                    <Tooltip content="课程社区URL" placement="right" theme="light">
                        <Input prefix="ios-home-outline"
                               v-model="subjectInfo.subCommunityUrl"
                               placeholder="开发中..."
                               style="width: 800px"
                               disabled
                               clearable/>
                    </Tooltip>
                </FormItem>

                <!--课程标题-->
                <FormItem label="课程标题">
                    <Tooltip content="课程标题" placement="right" theme="light">
                        <Input prefix="ios-calendar-outline"
                               v-model="subjectInfo.subName"
                               placeholder="课程标题"
                               style="width: 500px"
                               clearable/>
                    </Tooltip>
                </FormItem>
                <!--会员类型-->
                <FormItem label="会员类型" prop="vip">
                    <RadioGroup v-model="subjectInfo.vip">
                        <Radio :label="1">会员</Radio>
                        <Radio :label="0">非会员</Radio>
                    </RadioGroup>
                </FormItem>

                <!--课程评分-->
                <FormItem label="课程评分">
                    <Tooltip content="0 - 5分" placement="right" theme="light">
                        <InputNumber
                                v-model="subjectInfo.subScore"
                                placeholder="课程评分"
                                style="width: 100px"
                                :max="5"
                                :min="0"
                                :step="0.1"
                                clearable></InputNumber>
                    </Tooltip>
                </FormItem>


                <!--执教老师-->
                <FormItem label="执教老师">
                    <FormItem v-for="(obj, i) in tchList"
                              :key="i">
                        <Row>
                            <Col span="1">
                            <Button size="small" type="error" @click="delTch(i)"> ×</Button>
                            </Col>

                            <Col span="18">
                            <Input type="text"
                                   v-model="tchList[i]"
                                   placeholder="老师姓名"
                                   style="width: 150px;margin-left: -15px"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                </FormItem>

                <FormItem style="margin-top: -20px">
                    <Button size="small" type="info" @click="addTch"> +</Button>
                </FormItem>


                <!--qq群-->
                <FormItem label="QQ群">
                    <FormItem v-for="(obj, i) in qqList"
                              :key="i">
                        <Row>
                            <Col span="1">
                            <Button size="small" type="error" @click="delQQ(i)"> ×</Button>
                            </Col>

                            <Col span="18">
                            <Input type="text"
                                   v-model="qqList[i]"
                                   placeholder="QQ群"
                                   style="width: 150px;margin-left: -15px"></Input>
                            </Col>
                        </Row>
                    </FormItem>
                </FormItem>
                <FormItem style="margin-top: -20px">
                    <Button size="small" type="info" @click="addQQ"> +</Button>
                </FormItem>

                <!--课程简介-->
                <FormItem label="课程简介" prop="subIntroduction">
                    <Input clearble
                           style="width: 750px"
                           v-model="subjectInfo.subIntroduction"
                           maxlength="300"
                           type="textarea"
                           :autosize="{minRows: 2,maxRows: 5}"
                           placeholder="课程简介"
                           show-word-limit/>
                </FormItem>
            </Form>
        </Modal>

        <!--删除询问面板-->
        <Modal v-model="deleteSubFlag"
               draggable
               @on-ok="okSubDel">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">课程删除</span>
            </p>

            <p>
                确定删除
                <span style="color: #FF0000;font-size: 16px">《{{subjectInfo.subName}}》</span>
                的课程吗?
            </p>
            <span style="color: #FF0000;font-size: 14px">【慎重删除，删除无法找回】</span>
        </Modal>

        <!--排序面板-->
        <Modal v-model="orderFlag"
               draggable
               @on-ok="okSubjectOrder">
            <p slot="header">
                <span style="color: #FF0000;font-size: 18px">用户排序</span>
            </p>

            将该课程
            <span style="color: #FF0000;font-size: 16px;margin: 0px 8px">{{subjectInfo.subName}} </span>
            放置序号为
            <InputNumber :max="subjectInfo.length"
                         :min="1"
                         style="width: 100px;margin: 0px 8px"
                         v-model="tmpIndex"></InputNumber>
            的课程前
        </Modal>
    </div>
</template>

<script>
    import expandRow from "@/components/course/ExpandRow"
    import {checkIsNull} from "@/tools/Null";

    export default {
        name: "",
        components: {
            expandRow
        },
        data() {
            return {
                //会员类型
                vipType: "",
                vipList: [
                    {value: '0', label: '非会员'},
                    {value: '1', label: '会员'}
                ],
                //课程类型
                cozType: "",
                cozList: [
                    {value: '0', label: '零基础入门'},
                    {value: '1', label: '前端'},
                    {value: '2', label: '数据库'},
                    {value: '3', label: '主流框架'},
                    {value: '4', label: 'SpringCloud'},
                    {value: '5', label: '高并发'},
                    {value: '6', label: 'Java虚拟机'},
                ],
                //老师类型
                teacherType: "",
                teacherList: [
                    {value: '0', label: '张三'},
                    {value: '1', label: '李四'},
                    {value: '2', label: '王五'},
                    {value: '3', label: '闻家奇'},
                    {value: '4', label: '迪丽热巴'},
                ],
                //图片还是列表展示 true图片展示
                showTypeFlag: true,
                //课程列表
                subjectList: [],
                //iView 表格
                subjectListData: [
                    {
                        title: "", align: "center", width: 40, type: 'expand', render: (h, params) => {
                            return h(expandRow, {
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    {title: "#", type: 'index', resizable: true, align: "center", width: 70},
                    {title: "课程标题", slot: 'title', resizable: true, align: "center"},
                    {title: "封面", slot: 'subPic', resizable: true, tooltip: true, align: "center", width: 200},

                    {title: "课时", slot: 'subTotal', resizable: true, align: "center", width: 80},
                    {title: "评分", slot: 'subScore', resizable: true, align: "center", width: 80},
                    {title: "VIP", slot: 'vip', resizable: true, align: "center", width: 80},

                    {title: "状态", slot: 'status', resizable: true, align: "center", width: 80},
                    {title: "详情", slot: 'details', resizable: true, align: "center", width: 80},
                    {title: "编辑", slot: 'edit', resizable: true, align: "center", width: 80},
                    {title: "排序", slot: 'order', resizable: true, align: "center", width: 80},
                    {title: "删除", slot: 'del', resizable: true, align: "center", width: 80}
                ],

                //课程对象
                subjectInfo: {
                    //主键Id
                    subjectId: "",
                    //科目名称
                    subName: "",
                    //课程图片
                    subPic: "",
                    //课程社区url
                    subCommunityUrl: "",
                    //课程教师
                    subTeacher: "",
                    //qq群
                    qqGroup: "",
                    //课程简介
                    subIntroduction: "",
                    //课时总数
                    subTotal: "",
                    //课程评分，0-5，默认5分
                    subScore: 5.0,
                    //是否vip课程 默认0,非vip课程
                    vip: 0,
                    //显示排序
                    showOrder: "",
                    //状态  1在用  0失效
                    status: "",
                    //创建人id
                    createUser: "",
                    //创建时间
                    createTime: "",
                },
                //教师数组
                tchList: [""],
                //qq群
                qqList: [""],
                row: {},
                index: {},
                //放置索引
                tmpIndex: 1,
                //更新课程面板
                updateSubFlag: false,
                //删除
                deleteSubFlag: false,
                //排序
                orderFlag: false,
                //放置索引
                tmpIndex: 1
            }
        },
        methods: {
            //选择会员类型
            changeVip: function (value) {
                this.vipType = value
                this.selectSubjectList()
            },
            //点击详情
            goDetails: function (row, index) {
                this.$emit("course-list",{
                    subjectInfo:row
                })
            },
            //字符串转数组
            str2Arr: function (str) {
                let arr = []
                let split = str.split(";");
                for (let i = 0; i < split.length; i++) {
                    arr.push(split[i])
                }
                return arr
            },
            //点击编辑
            edit: function (row, index) {
                this.updateSubFlag = true
                this.subjectInfo = row
                this.index = index

                this.tchList = this.str2Arr(this.subjectInfo.subTeacher)
                this.qqList = this.str2Arr(this.subjectInfo.qqGroup)
            },
            //删除教师
            delTch: function (i) {
                this.tchList.delete(i)
                if (this.tchList.length == 0) {
                    this.tchList.push("")
                }
            },
            //添加教师
            addTch: function () {
                this.tchList.push("")
            },
            //删除QQ群
            delQQ: function (i) {
                this.qqList.delete(i)
                if (this.qqList.length == 0) {
                    this.qqList.push("")
                }
            },
            //添加QQ群
            addQQ: function () {
                this.qqList.push("")
            },
            //校验数组
            checkArray: function (arr) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].trim().length == 0) {
                        arr.delete(i)
                    }
                }
                if (arr.length == 0) {
                    return false
                }
                return true
            },
            //新增前校验数据
            checkData: function () {
                let flag = true;
                let b2 = checkIsNull(this.subjectInfo.subPic);
                if (b2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '课程封面不能为空'
                    });
                    flag = false
                }
                let b3 = checkIsNull(this.subjectInfo.subName);
                if (b3) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '课程标题不能为空'
                    });
                    flag = false
                }
                let b = this.checkArray(this.tchList);
                if (!b) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '至少填写一个教师'
                    });
                    this.tchList.push("")
                    flag = false
                }
                let b1 = this.checkArray(this.qqList);
                if (!b1) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '至少填写一个QQ群'
                    });
                    this.qqList.push("")
                    flag = false
                }
                return flag
            },
            //组装数据  教师数组 转 字符串
            packArray: function (arr) {
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += arr[i]
                    str += ";"
                }
                let s = str;
                return s.substring(0, str.length - 1);
            },
            //确定编辑按钮
            okUpdateSub: function () {
                //校验数据
                let b = this.checkData();
                if (!b) {
                    return
                }
                //组装数据
                this.subjectInfo.subTeacher = this.packArray(this.tchList)
                this.subjectInfo.qqGroup = this.packArray(this.qqList)

                let data = {
                    subName: this.subjectInfo.subName,
                    subPic: this.subjectInfo.subPic,
                    subCommunityUrl: this.subjectInfo.subCommunityUrl,
                    subTeacher: this.subjectInfo.subTeacher,
                    qqGroup: this.subjectInfo.qqGroup,
                    subIntroduction: this.subjectInfo.subIntroduction,
                    subScore: this.subjectInfo.subScore,
                    vip: this.subjectInfo.vip,
                    createUser: this.$store.getters.getId,
                }
                this.axios.put(`/course/subject/subject/${this.subjectInfo.subjectId}`, data)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.info({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程更新成功'
                            });
                            this.subjectInfo = {
                                subScore: 5.0,
                                vip: 0,
                            }
                            this.tchList = [""]
                            this.qqList = [""]
                            this.selectSubjectList()
                        }
                    })
            },
            //改变状态
            changeStatus: function (row) {
                let data = {
                    status: row.status
                }
                this.axios.put(`/course/subject/subject/${row.subjectId}`, data)
                    .then((data) => {
                        this.$Message.info({
                            background: true,
                            closable: true,
                            content: '状态修改成功'
                        });
                        this.selectSubjectList()
                    })
            },
            //点击排序
            order: function (row, index) {
                this.orderFlag = true
                this.subjectInfo = row
                this.index = index
            },
            //确定排序
            okSubjectOrder:function(){
                let number = this.tmpIndex - this.index;
                if (number == 1 || number == 2) {
                    this.$Message.error({
                        background: true,
                        closable: true,
                        duration: 2,
                        content: '请勿将本条数据原地移动'
                    });
                    return
                }
                if (this.tmpIndex > this.index) {
                    this.tmpIndex--
                }
                let tmpSubjectList = this.subjectList;
                tmpSubjectList.delete(this.index)
                tmpSubjectList.insert(this.tmpIndex, this.subjectInfo)

                let ids = []
                for (let i = 0; i < this.subjectList.length; i++) {
                    ids.push(this.subjectList[i].subjectId)
                }
                this.axios.put(`/course/subject/order`, ids)
                    .then((data) => {
                        this.$Message.warning({
                            background: true,
                            closable: true,
                            duration: 2,
                            content: '课程排序成功'
                        });
                    })
            },
            //拖拽排序
            dragOrder: function (fromIndex, toIndex) {
                this.subjectInfo = this.subjectList[fromIndex];
                this.index = fromIndex;
                this.tmpIndex = toIndex + 1;
                this.okSubjectOrder()
            },
            //点击删除
            del: function (row, index) {
                this.deleteSubFlag = true;
                this.subjectInfo = row
            },
            //确定删除
            okSubDel: function () {
                this.axios.delete(`/course/subject/subject/${this.subjectInfo.subjectId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.error({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '课程删除成功'
                            });
                            this.selectSubjectList()
                        }
                    })
            },
            //改变图形 列表 展示方式
            changeShowType: function () {
                this.$Message.destroy();
                this.showTypeFlag = !this.showTypeFlag
                this.status = this.showTypeFlag ? 1 : "";
                this.selectSubjectList()
            },
            //打开详情
            gotoDetails: function (obj) {
                //跳转
                //TODO
                /*let {href} = this.$router.resolve({
                    name: "CourseList",
                    query: {
                        sid: obj.subjectId
                    }
                });
                window.open(obj, '_blank');*/
            },
            //查询课程列表
            selectSubjectList: function () {
                this.axios.get(`/course/subject/subjectList`, {
                    params: {
                        userId:this.$store.getters.getId,
                        vip: this.vipType,
                        status: this.status
                    }
                })
                    .then((data) => {
                        this.subjectList = data.data
                    })
            }
        },
        computed: {
            //还有 Admin.Vue 里也有
            teacherFlag: function () {
                let flag = true;
                let sysRoles = this.$store.getters.getUserInfo.sysRoles;
                for (let i = 0; i < sysRoles.length; i++) {
                    if (sysRoles[i].def == 1 && sysRoles.length == 1) {
                        flag = false
                    }
                }
                return flag
            }
        },
        mounted() {
            //查询列表
            this.selectSubjectList();

            //选中列表触发查询
            this.Bus.$on("course-list-select", (data) => {
                this.vipType = ""
                this.cozType = ""
                this.teacherType = ""
                if (data.select == true) {
                    this.selectSubjectList();
                }
            })
        }
    }
</script>

<style scoped>
    /*查询条件*/
    .subjectList .header {
    }

    /*展示界面*/
    .subjectList .body {

    }

    .subjectList .vip {
        display: inline-block;
        height: 40px;
        width: 40px;
    }

    /*课程标题*/
    .subjectList .list .name {
        display: block;
        height: 60px;
        line-height: 60px;
        margin: 0px -18px;
    }

    /*评分文字颜色*/
    .subjectList .list .score {
        font-size: 18px;
        color: #FF0000;
    }

    /*图片展示*/
    .subjectList .box {
        margin: auto;
        width: 1200px;
        overflow: hidden;
    }

    /*5等分*/
    .subjectList .body .box .avg {
        margin: 40px 0px 0px 30px;
        cursor: pointer;
        float: left;
        /*width: calc(20% - 30px);*/
        width: 210px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        overflow: hidden;
    }

    .subjectList .body .box .avg :nth-child(5n+1) {
        margin-left: 0px;
    }

    /*img盒子*/
    .subjectList .body .box .avg .img-box {
        width: 216px;
        height: 120px;
        border-radius: 6px;
    }

    /*课程图片*/
    .subjectList .body .box .avg img {
        display: inline-block;
        width: 208px;
        height: 112px;
        margin-top: 4px;
        margin-left: 4px;
        border-radius: 6px;
    }

    .subjectList .body .box .avg img:hover {
        display: inline-block;
        width: 216px;
        height: 120px;
        margin-top: 0px;
        margin-left: 0px;
        border-radius: 6px;
    }

    /*课程名称*/
    .subjectList .body .box .avg .name {
        width: 100%;
        height: 32px;
        font-size: 16px;
        line-height: 16px;
        color: #07111B;
        font-family: 微软雅黑;
        font-weight: bold;
    }

    /*课程名称*/
    .subjectList .body .box .avg .name:hover {
        width: 100%;
        height: 32px;
        font-size: 16px;
        line-height: 16px;
        color: #F20A0A;
        font-family: 微软雅黑;
        font-weight: bold;
    }

    /*简介*/
    .subjectList .body .box .avg .introduction {
        width: 100%;
        height: 32px;
        margin-top: 5px;
        font-size: 14px;
        color: rgba(135, 135, 135, 1);;
        line-height: 16px;

        /*溢出省略...*/
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*其他*/
    .subjectList .body .box .avg .other-box {
        width: 100%;
        overflow: hidden;
    }

    /*vip*/
    .subjectList .body .box .avg .other-box .vip {
        float: left;
    }

    .subjectList .body .box .avg .other-box .vip .yes {
        font-size: 14px;
        color: #ffac41;
        font-weight: bolder;
    }

    .subjectList .body .box .avg .other-box .vip .no {
        font-size: 14px;
        color: #F20A0A;
        font-weight: bolder;
    }

    .subjectList .body .box .avg .other-box .view {
        float: left;
    }

    .subjectList .body .box .avg .other-box .score {
        float: right;
    }
</style>